<template>
  <div class="interview-detail-container">
    <!-- 顶部 -->
    <MMNavBar back="/find"></MMNavBar>
    <!-- 主体内容区域 -->
    <van-skeleton title :loading="detail === undefined" :row="20">
    <div class="main-box" v-if="detail">
      <!-- 标题区域 -->
      <div class="title-box">
        <div class="content">
          <div class="title van-multi-ellipsis--l2">
            {{detail.title}}
          </div>
          <div class="info">
            <div class="time">{{ detail.created_at | formatTime}}</div>
            <div class="see">
              <i class="iconfont iconicon_liulanliang"></i>
              <span>{{ detail.read}}</span>
            </div>
            <div class="zan" @click="starArticle" >
              <!-- 通过vuex中的isActive来判断是否高亮 这里注意isActive
              是一个函数,是可以传递参数过去的-->
              <i class="iconfont iconbtn_dianzan_small_nor"
              :class="{ actived: isActive(detail.id)}"
              ></i>
              <span>{{ detail.star }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容区域 -->
      <div class="main" v-html="detail.content">
      </div>
    </div>
    </van-skeleton>
  </div>
</template>

<script>
// import MMNavBar from '../../components/MMNavBar'
// 导接口
import { getTechDetail, starArticle } from '../../api/find'
// import { getUserInfo } from '../../api/my'
// 添加辅助函数
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
// import { getToken, removeToken } from '../../utils/token'
import { getToken } from '../../utils/token'
export default {
  name: 'tech-detail',
  data () {
    return {
      detail: undefined,
      // 点击过的文章的缓存数据
      articleTem: {}
    }
  },
  // components: {
  //   MMNavBar
  // },
  computed: {
    // 这个是观察是否登录的数据
    ...mapState(['isLogin']),
    ...mapGetters(['isActive'])
  },
  created () {
    // 进行一次优化,进入页面之后先判断缓存,然后在执行
    // this.$toast.loading()
    // const { id } = this.$route.params
    // getTechDetail(id).then(res => {
    //   // 设置
    //   this.detail = res.data.data
    // // 在页面打开的时候,尝试直接偷偷的获取用户的信息,
    // // 这里显示的是没有登录,因为islogin是false
    // if (this.isLogin === false) {
    //   // 有token 没有登录但是有token
    //   if (getToken()) {
    //     // 偷偷获取用户数据
    //     getUserInfo().then(res => {
    //       console.log(res)
    //       if (res.data.code === 200) {
    //         // 将数据存储起来,将登录状态改为true
    //         this.CHANGEISLOGIN(true)
    //         // 改变用户信息
    //         this.CHANGEUSERINFO(res.data.data)
    //       } else {
    //         // token有问题
    //         removeToken()
    //       }
    //     })
    //   }
    // }
    // })
    // 调用actions
    this.asyncGetUserInfo()
  },
  // 新的生命周期函数,这里面添加的就是让页面更新的逻辑
  activated () {
    const { id } = this.$route.params
    const detail = this.articleTem[id]
    if (detail === undefined) {
      // 没有缓存
      this.$toast.loading()
      const { id } = this.$route.params
      getTechDetail(id).then(res => {
      // 设置  这里是把获取的这个对象(就是当前的这篇文章显示到页面)
        this.detail = res.data.data
        // 缓存起来形式就是文章的id后面跟着文章的内容
        // 这就是一个对象套对象的格式 这里是把这篇文章给缓存下来
        // 使用动态属性名的方式,直接缓存的就是一个键值对的形式
        this.articleTem[id] = res.data.data
      })
    } else {
      // 有缓存
      this.detail = detail
    }
    // ************************************************
    // 一下是之前的老代码,也有用,只是优化
    // 重新被激活以后会触发
    // 如果缓存组件中的内容不为空,就是有东西,那就比较看
    // 存的内容,跟自己选中的内容是不是同一个
    // if (this.detail !== undefined) {
    //   // 从url地址中获取id值
    //   const { id } = this.$route.params
    //   // 比较id的两种方法
    //   // if (this.detail.id !==  +id)
    //   if (this.detail.id !== parseInt(id)) {
    //     // id值不一样,可以更新页面 数据 这第二个id值是从结构赋值中获取的
    //     this.$toast.loading()
    //     // 清空detail,让骨架屏出现
    //     this.detail = undefined
    //     // 获取数据
    //     getTechDetail(id).then(res => {
    //       // 设置新的值 把新的值放到缓存中
    //       this.detail = res.data.data
    //     })
    //   }
    // }
  },
  methods: {
    // ...mapMutations(['CHANGEUSERINFO', 'CHANGEISLOGIN', 'CHANGEPROP']),
    ...mapMutations(['CHANGEPROP']),
    ...mapActions(['asyncGetUserInfo']),
    // 点击点赞按钮
    starArticle () {
      if (!getToken()) {
        // 木有 去登陆 带着url
        this.$router.replace(`/login?redirect=${this.$route.path}`)
      }
      // 有token
      this.$toast.loading()
      starArticle({
        article: this.detail.id
      }).then(res => {
        // 更新vuex中的点赞文章数组
        this.CHANGEPROP({
          propName: 'starArticles',
          propValue: res.data.data.list
        })
        // 最后修改本地数据
        this.detail.star = res.data.data.num
      })
    }
  }
}
</script>

<style lang="less">
.interview-detail-container {
  .main-box {
    padding: 15px;
    .main {
      padding-top: 28px;
      font-size: 16px;
      img {
        width: 100%;
      }
    }
  }
  .title-box {
    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 16px;
        font-weight: 500;
        color: @main-font-color;
      }
      .info {
        color: @minor-font-color;
        font-size: 12px;
        display: flex;
        margin-top: 10px;
        align-items: center;
        .time {
          flex: 1;
        }
        .iconfont {
          margin-right: 8px;
          font-size: 16px;
          line-height: 1;
        }
        .see {
          margin-right: 23px;
          display: flex;
          align-items: center;
        }
        .zan {
          display: flex;
          align-items: center;
          .iconfont.actived {
            color: @main-color;
          }
        }
      }
    }
  }
}
</style>
